<template>
  <section class="box comments">
    <hr />
    <h3 class="title is-5">{{ $t("comment.title") }}</h3>
    <comment-form :slug="slug" v-if="token" @loadComment="fetchComment" />

    <comment-item
      v-for="comment in comments"
      :key="`comment-${comment.id}`"
      :comment="comment"
    />
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import { fetchCommentByTopicId } from "@/api/comment";
import CommentForm from "./CommentForm";
import CommentItem from "./CommentItem";

export default {
  name: "Comment",
  components: {
    CommentForm,
    CommentItem,
  },
  data() {
    return {
      comments: [],
    };
  },
  props: {
    slug: {
      type: String,
      default: null,
    },
  },
  computed: {
    ...mapGetters(["token"]),
  },
  async mounted() {
    await this.fetchComment(this.slug);
  },
  methods: {
    async fetchComment(topic_id) {
      fetchCommentByTopicId(topic_id).then((response) => {
        const { data } = response;
        this.comments = data;
      });
    },
  },
};
</script>
